<template>
    <div>
    <div id="main" style="width: 100%; height: 400px"></div>
    <div>热门城市</div>
    <div class="city">
        <div @click="changes('北京市')">北京市</div>
        <div @click="changes('武汉市')">武汉市</div>
        <div @click="changes('大连市')">大连市</div>
        <div @click="changes('恩施州')">恩施州</div>
        <div @click="changes('长春市')">长春市</div>
        <div @click="changes('淄博市')">淄博市</div>
        <div @click="changes('长沙市')">长沙市</div>
        <div @click="changes('天津市')">天津市</div>
        <div @click="changes('深圳市')">深圳市</div>
        <div @click="changes('三亚市')">三亚市</div>
        <div @click="changes('上海市')">上海市</div>
        <div @click="changes('苏州市')">苏州市</div>
        <div @click="changes('厦门州')">厦门州</div>
        <div @click="changes('南京市')">南京市</div>
        <div @click="changes('昆明市')">昆明市</div>
    </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { useRouter } from 'vue-router'
import { hourAirQuery } from '@/service/cityService'
let hourList:any = ref([]);
let name = ref('北京')
let name1=ref('上海')
let name2=ref('广州')
let router=useRouter()
let num=ref(1);

const changes=async(e:any)=>{
    console.log(e,num.value);
    if(num.value==1){
        name.value=e;
       await airQuerys()
       console.log(1);
        num.value++;
    }else if(num.value==2){
        console.log(2);
        name1.value=e;
       await airQuerys1()
        num.value++;
    }else if(num.value==3){
        console.log(3);
        name2.value=e;
       await airQuerys2()
        num.value=1;
    }
    console.log(name.value,name1.value,name2.value);
}
let result=ref([])
let result1=ref([])
let result2=ref([])
let airQuerys=async()=>{
    let {data}=await hourAirQuery({
    key: 'S_kv1Ro8FrmQ4UeD9',
    location:name.value,
    language: 'zh-Hans',
    days: 1
  });
  let i=0;
  data.results[0].hourly.forEach((item:any)=>{
    hourList.value[i]=item;
    i++;
  });
  let aa= JSON.parse(JSON.stringify(hourList.value))
  let bb=[];
  let res:any=[]
  aa.forEach((item:any)=>{
    bb=[]
    bb.push(item.aqi);
    bb.push(item.pm25);
    bb.push(item.pm10);
    bb.push(item.co);
    bb.push(item.no2);
    bb.push(item.so2);
    res.push(bb)
  })
  result.value= res;
  echartsShow()
  console.log(result.value);
}

let airQuerys1=async()=>{
    let {data}=await hourAirQuery({
    key: 'S_kv1Ro8FrmQ4UeD9',
    location:name.value,
    language: 'zh-Hans',
    days: 1
  });
  let i=0;
  data.results[0].hourly.forEach((item:any)=>{
    hourList.value[i]=item;
    i++;
  });
  let aa= JSON.parse(JSON.stringify(hourList.value))
  let bb=[];
  let res:any=[]
  aa.forEach((item:any)=>{
    bb=[]
    bb.push(item.aqi);
    bb.push(item.pm25);
    bb.push(item.pm10);
    bb.push(item.co);
    bb.push(item.no2);
    bb.push(item.so2);
    res.push(bb)
  })
  result1.value= res;
  echartsShow()
}

let airQuerys2=async()=>{
    let {data}=await hourAirQuery({
    key: 'S_kv1Ro8FrmQ4UeD9',
    location:name.value,
    language: 'zh-Hans',
    days: 1
  });
  let i=0;
  data.results[0].hourly.forEach((item:any)=>{
    hourList.value[i]=item;
    i++;
  });
  let aa= JSON.parse(JSON.stringify(hourList.value))
  let bb=[];
  let res:any=[]
  aa.forEach((item:any)=>{
    bb=[]
    bb.push(item.aqi);
    bb.push(item.pm25);
    bb.push(item.pm10);
    bb.push(item.co);
    bb.push(item.no2);
    bb.push(item.so2);
    res.push(bb)
  })
  result2.value= res;
  echartsShow()
  console.log(2,result2.value);
}

let echartsShow=()=>{
  var chartDom:any = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

const dataBJ = JSON.parse(JSON.stringify(result.value));
const dataGZ = JSON.parse(JSON.stringify(result1.value));
const dataSH =JSON.parse(JSON.stringify(result2.value));
  const lineStyle = {
  width: 1,
  opacity: 0.5
};
option = {
  backgroundColor: '#161627',
  title: {
    text: 'AQI - Radar',
    left: 'center',
    textStyle: {
      color: '#eee'
    }
  },
  legend: {
    bottom: 5,
    data: [name.value,name1.value , name2.value],
    itemGap: 20,
    textStyle: {
      color: '#fff',
      fontSize: 14
    },
    selectedMode: 'single'
  },
  radar: {
    indicator: [
      { name: 'AQI'},
      { name: 'PM2.5' },
      { name: 'PM10' },
      { name: 'CO' },
      { name: 'NO2' },
      { name: 'SO2'}
    ],
    shape: 'circle',
    splitNumber: 5,
    axisName: {
      color: 'rgb(238, 197, 102)'
    },
    splitLine: {
      lineStyle: {
        color: [
          'rgba(238, 197, 102, 0.1)',
          'rgba(238, 197, 102, 0.2)',
          'rgba(238, 197, 102, 0.4)',
          'rgba(238, 197, 102, 0.6)',
          'rgba(238, 197, 102, 0.8)',
          'rgba(238, 197, 102, 1)'
        ].reverse()
      }
    },
    splitArea: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(238, 197, 102, 0.5)'
      }
    }
  },
  series: [
    {
      name: name.value,
      type: 'radar',
      lineStyle: lineStyle,
      data: dataBJ,
      symbol: 'none',
      itemStyle: {
        color: '#F9713C'
      },
      areaStyle: {
        opacity: 0.1
      }
    },
    {
      name: name1.value,
      type: 'radar',
      lineStyle: lineStyle,
      data: dataSH,
      symbol: 'none',
      itemStyle: {
        color: '#B3E4A1'
      },
      areaStyle: {
        opacity: 0.05
      }
    },
    {
      name: name2.value,
      type: 'radar',
      lineStyle: lineStyle,
      data: dataGZ,
      symbol: 'none',
      itemStyle: {
        color: 'rgb(238, 197, 102)'
      },
      areaStyle: {
        opacity: 0.05
      }
    }
  ]
};

option && myChart.setOption(option);
}

onMounted(async() => {
await airQuerys()
await airQuerys1()
await airQuerys2()
await echartsShow()
})
</script>

<style scoped lang="scss">
.city{
    background: #fff;
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 10px;
    flex-wrap: wrap;
    div{
        width: 30%;
        background: rgba($color: #ecbfc9, $alpha: 0.6);
        text-align: center;
        margin-bottom: 10px;
        margin-left: 5px;
    }
}
</style>